<template>
    <div class="login">
        <div class="boxClass">
                <el-row>
                    <el-col :span="18" :offset="3">
                        <div class="titlediv">欢迎登录</div>
                    </el-col>
                </el-row>
                <el-row class="userinput">
                    <el-col :span="18" :offset="3">
                        <el-input maxlength="20" placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.name"
                                   ref="usernameInput"  clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" :offset="3">
                        <el-input maxlength="20" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password"
                                  @keyup.enter.native="login()" ref="passwordInput" show-password clearable></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="7">
                        <el-button icon="el-icon-s-promotion" class="loginbut" type="primary" @click="login">登录</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5" :offset="16">
                        <el-link type="primary" class="toRegist"  @click="toRegister">没有帐号？注册</el-link>
                    </el-col>
                </el-row>

        </div>
    </div>
</template>

<script>
    // import qs from 'qs';
    export default {
        name: "Login",
        data(){
            return{
                user:{
                    name:'',
                    password:''
                }
            }
        },
        mounted:function(){
            this.$refs.usernameInput.focus();
        },
        methods:{
            //基础验证两个输入
            //登录
            login(){
                if (this.user.name.length <= 0) {
                    this.$message.error("请输入用户名");
                    return false;
                }
                if (this.user.password.length <= 0) {
                    this.$message.error("请输入密码");
                    return false;
                }
                let _this = this;
                _this.$axios({
                    url: "auth/login",
                    method: "POST",
                    headers:{
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: _this.$Qs.stringify(_this.user)
                })
                .then(function (res) {
                    let result= res.data;
                    if (result.status == 200) {
                        _this.$router.push({name:'Index'})
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
                .catch(function (res) {
                    console.log("出现错误"+res);
                })
            },
            //跳转注册页面
            toRegister() {
                this.$router.push({name:'Register'})
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #e2e7bf;
        background-image: url("../assets/touming.png");
    }
.boxClass {
    width: 37%;
    margin: 120px auto;
    background-color: rgba(255,255,255,0.2);
    border-radius: 30px;
}
    .el-row {
        text-align: center;
        margin-bottom: 20px;
    }
    .userinput{
        margin-top: 50px;
    }
    .loginbut{
        width: 100%;
        height: 100%;
    }
    .titlediv{
        width: 100%;
        height: 100%;
        color: #2b312c;
        font-size: 25px;
        margin-top: 20px;
        font-weight: 600;
    }
    .toRegist{
        font-size: 14.5px;
    }
</style>